<template>
    <div style="text-align: right;margin-bottom: 20px;">
        <el-button style="width: 100px;height: 50px;" type="primary" @click="()=>{addSystemAnswerParm={question:'',answer:'',};showDialog=true}">新增</el-button>
    </div>
    <div>
        <el-table :data="systemAnswerList?.items" stripe border>
            <el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
            <el-table-column prop="question" label="问题" show-overflow-tooltip></el-table-column>
            <el-table-column prop="answer" label="回答" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button @click="()=>{addSystemAnswerParm= {...scope.row};showDialog=true}" type="primary">编辑</el-button>
                    <el-button @click="deleteAnswer(scope.row.id)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="pagination">
        <el-pagination layout="prev, pager, next" v-model:current-page="systemAnswerParm.pageNo" :page-count="Number.parseInt(systemAnswerList?.page ?? '0')" @update:current-page="getSystemAnswerList()" />
    </div>

    <el-dialog v-model="showDialog" title="新增系统问题" width="40%">
        <el-input v-model="addSystemAnswerParm.question" placeholder="请输入问题"></el-input>
        <el-input style="margin-top: 10px;" type="textarea" rows="6" v-model="addSystemAnswerParm.answer" placeholder="请输入回答"></el-input>
        <el-button style="margin-top: 10px;" type="primary" @click="addSystemAnswer()">保存</el-button>
    </el-dialog>
    
</template>

<script setup lang="ts">
    import {ref,onMounted} from 'vue'

    import SystemAnswer from '@/types/user/SystemAnswer'
    import SystemAnswerParm from '@/types/user/SystemAnswerParm';
    import Page from '@/base/page';
    import request from '@/base/request';
    import { ElMessage } from 'element-plus';
    const showDialog=ref(false)

    const systemAnswerParm=ref<SystemAnswerParm>({
        pageNo:1,
        pageSize:10
    })
    const systemAnswerList = ref<Page<SystemAnswer>>()

    const addSystemAnswerParm=ref<SystemAnswer>({
        question:'',
        answer:'',
    })

    const addSystemAnswer=async()=>{
        const response= (await request.post('/user/systemQuestionAnswer/addSystemAnswer',addSystemAnswerParm.value)).data
        if(response.code===200){
            ElMessage.success('操作成功')
            addSystemAnswerParm.value={
                question:'',
                answer:'',
            }
            getSystemAnswerList()
            showDialog.value=false
        }else{
            ElMessage.error(response.msg)
        }
    }

    const getSystemAnswerList=async()=>{
        const response = (await request.post('/user/systemQuestionAnswer/getAllSystemList',systemAnswerParm.value)).data
        if(response.code===200){
            systemAnswerList.value=response.data
        }else{
            ElMessage.error(response.msg)
        }
    }


    const deleteAnswer=async(id:number)=>{
        const response=(await request.delete(`/user/systemQuestionAnswer/removeSystemAnswer?id=${id}`)).data
        if(response.code===200){
            getSystemAnswerList()
            ElMessage.success('删除成功')
        }else{
            ElMessage.error(response.msg)
        }
    }

    onMounted(()=>{getSystemAnswerList()})
</script>


<style scoped>
    .pagination{
        text-align: center;
        margin-left: 70vh;
    }

    :deep .el-table__row {
        height: 50px;
    }

</style>